<template>
  <div class="parameter">
    <div class="el-header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/2">系統設置管理页面</el-menu-item>
      </el-menu>
    </div>

    <div class="zbd">
      <div class="bd">
        <span class="bd-z">店铺订单抽佣比例</span>
        <span class="cyb">抽佣比</span>
        <input class="inp" type="text" v-model="rule.order" :rules="rules" />
        <span class="wzf">%</span>
      </div>
    </div>

    <div class="zbd zbd2">
      <div class="bd">
        <span class="bd-z">用户素材收佣比例</span>
        <span class="cyb">抽佣比</span>
        <input class="inp" type="text" v-model="rule.material" :rules="rules" />
        <span class="wzf">%</span>
      </div>
    </div>
    <el-button type="primary" @click="onSubmit('rule')">
      <div class="btn">保存</div>
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'Parameter',
  props: [''],
  data() {
    return {
      rule: {
        order: '26',
        material: '30'
      },
      rules: {
        order: [{ required: true, message: '请输入数字', trigger: 'blur' }],
        material: [{ required: true, message: '请输入数字', trigger: 'blur' }]
      }
    }
  },

  components: {},

  computed: {},

  created() {},

  mounted() {},

  methods: {
    onSubmit() {
      this.$message({
        message: '保存成功',
        type: 'success'
      })
    }
  },

  watch: {}
}
</script>
<style lang="less" scoped>
.parameter {
  width: 100%;
  .el-header {
    color: #333;
    height: 70px !important;
    padding: 0;
  }
  .zbd {
    border-width: 0px;
    position: absolute;
    left: 215px;
    top: 90px;
    width: 740px;
    height: 87px;
    display: flex;
    .bd {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 740px;
      height: 87px;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border: 1px solid rgba(121, 121, 121, 1);
      border-radius: 5px;
      box-shadow: none;
      .bd-z {
        border-width: 0px;
        position: absolute;
        left: 10px;
        top: 12px;
        width: 112px;
        height: 16px;
        display: flex;
        font-size: 14px;
        text-align: left;
        border-width: 0px;
      }
      .cyb {
        border-width: 0px;
        position: absolute;
        left: 53px;
        top: 43px;
        width: 42px;
        height: 16px;
        font-size: 14px;
        display: flex;
        color: #282828;
      }
      .inp {
        border-width: 0px;
        position: absolute;
        left: 104px;
        top: 41px;
        width: 42px;
        height: 25px;
        display: flex;
        color: #000000;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        text-align: left;
        border: 1px solid rgba(121, 121, 121, 1);
        border-radius: 0px;
      }
      .wzf {
        border-width: 0px;
        position: absolute;
        left: 152px;
        top: 43px;
        width: 20px;
        height: 16px;
        display: flex;
        color: #282828;
        font-size: 14px;
      }
    }
  }
  .zbd2 {
    top: 185px;
  }
  .el-button {
    border-width: 0px;
    position: absolute;
    left: 260px;
    top: 302px;
    width: 140px;
    height: 40px;
    .btn {
      text-align: center;
    }
  }
}
</style>
